<template>
  <!--会签管理-单据申请-->
  <div class="ant-card">
    <div class="ant-card-body">
      <block v-for="(item,index) in treeData" :key="index">
        <div class="ant-card-grid2">
          <div class="ant-card-head" style="background-color: #0066cc;">
            <div class="ant-card-head-wrapper">
              <div class="ant-card-head-title">{{item.billsTypeName}}</div>
            </div>
          </div>
          <div class="ant-grid" v-for="(ite, ind) in item.list" :key="ind">
            <a @click="tolink(ite)">{{ite.billsTemplateName}}</a>
          </div>
        </div>
      </block>
    </div>
    <huiqian-modal  ref="modalForm"></huiqian-modal>
  </div>
</template>
<script>
  import '@/assets/less/TableExpand.less'
  import {
    mixinDevice
  } from '@/utils/mixin'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import {
    httpAction,
    getAction
  } from '@/api/manage'
   import huiqianModal from './components/huiqianModal.vue'
  export default {
    components: {
      huiqianModal,
    },
    data() {
      return {
        treeData: [],
        url: {
          list: '/countersign/wtCountersignTemplate/queryList',
          delete: '/wtBrand/delete',
          deleteBatch: '/wtBrand/deleteBatch',
          exportXlsUrl: '/wtBrand/exportXls',
          importExcelUrl: 'wtBrand/importExcel',
        },
        countersignTemplateId: '',
        pageType:'', //add-新增 anew-重复提交 edit-编辑 detail-详情 approver-审批 history-历史记录
      }
    },
    created() {
      this.loadTree();
    },
    mounted() {
      let _self = this;
      let link = window.location.href;
      let obj = this.GetRequest(link);
      console.log(222,obj)
      if(!!obj.id){
        let obj2 = {
          id:obj.id,
          billsTemplateName:obj.billsTemplateName,
          receiptsModel:obj.receiptsModel,
          objlist:obj.objlist,
        }
       _self.tolink(obj2);
      }
    },
    methods: {
      tolink(record){
        this.$refs.modalForm.title = '新增';
        this.$refs.modalForm.pageType = 'add';
        this.$refs.modalForm.billsTemplateName = record.billsTemplateName;
        this.$refs.modalForm.receiptsModel = record.receiptsModel;
        this.$refs.modalForm.add(record);
        this.$refs.modalForm.disableSubmit = false;
      },
      GetRequest(url) {
      	var theRequest = new Object();
      	if (url.indexOf("?") != -1) {
      		var str = url.split("?")[1];
      		var strs = str.split("&");
      		for (var i = 0; i < strs.length; i++) {
      			theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
      		}
      	} else {
      		console.log(16, url)
      	}
      	return theRequest;
      },
      loadTree() {
        getAction(`/countersign/wtCountersignTemplate/queryList`).then((res) => {
          if (res.success) {
            let objlist2 = [];
            let objlist4 = [];
            let objlist = res.result;
            if (objlist && objlist.length > 0) {
              objlist.forEach(ite => {
                objlist2.push(ite.billsTypeName);
              })
            }
            let objlist3 = this.unique(objlist2);
            if (objlist3 && objlist3.length > 0) {
              objlist3.forEach(ite => {
                let obj = {
                  billsTypeName: '',
                  list: []
                }
                obj.billsTypeName = ite;
                objlist.forEach(ii => {
                  if (ii.billsTypeName === obj.billsTypeName) {
                    obj.list.push(ii);
                  }
                })
                objlist4.push(obj);
              })
            }
            this.treeData = this.unlink(objlist4);
            this.$forceUpdate() //二维数组，开启强制渲染

          }
        })
      },
      unlink(arr) {
        for (var i = 0; i < arr.length; i++) { // 首次遍历数组
          for (var ii = 0; ii < arr[i].list.length; ii++) {
            for (var jj = ii + 1; jj < arr[i].list.length; jj++) {
              if (arr[i].list[ii].billsTemplateName == arr[i].list[jj].billsTemplateName) { // 判断连个值是否相等
                //console.log(2,arr[i].list[ii].billsTemplateName)
                arr[i].list.splice(arr[i].list[jj], 1);
                jj--;
              }
            }
          }
        }
        return arr
      },
      unique(arr) {
        var hash = [];
        for (var i = 0; i < arr.length; i++) {
          if (hash.indexOf(arr[i]) == -1) {
            hash.push(arr[i]);
          }
        }
        return hash;
      },
    },
  }
</script>
<style scoped>
  .ant-card {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    color: rgba(243, 241, 241);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: 'tnum';
    position: relative;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s;
  }

  .ant-card .ant-card-body {
    padding: 24px;
    zoom: 1;
  }

  .ant-card-grid1 {
    width: 100%;
    height: 200px;
    /* background: #000; */
    margin-bottom: 10px;
  }

  .ant-card-grid2 {
    width: 100%;
    height: 300px;
    /* background: #000; */
    margin-bottom: 10px;
  }

  .ant-card-head {
    min-height: 48px;
    margin-bottom: -1px;
    padding: 0 24px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
    background: transparent;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 2px 2px 0 0;
    zoom: 1;
  }

  .ant-card-head-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
  }

  .ant-card-head-title {
    display: inline-block;
    -ms-flex: 1;
    flex: 1;
    padding: 10px 0;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ant-grid {
    display: inline-block;
    width: 200px;
    height: 100px;
    text-align: left;
    line-height: 100px;
    /* background-color:#fff ; */
    font-size: 16px;
    margin-left: 20px;
    color: rgb(51, 51, 51);
  }
</style>